<template>
   <div id="app" >
      <transition v-if="!$route.meta.NoNeedHome" name="fade" mode="out-in">
          <el-container>
              
              <el-menu
                default-active="2"
                class="el-menu-vertical-demo"
                :collapse="isCollapse"
                @open="handleOpen"
                @close="handleClose"
                @select="handleMenuSelect"
              >
                <h2><span>{{ userName }}</span></h2> 
                <sidebar :key="'menu'" :routers="routes"/>
              </el-menu>
            <el-container>
              <el-header>
                <div :class=" isCollapse?'tools collapsed':'tools'" @click="collapse">
                  <el-icon><Expand /></el-icon>
                </div>
              </el-header>

              <div style="margin: 3px">
                <my-breadcrumb v-for="(item,index) in tagsList"
                      :key="index"
                      :isEnable="item.path === this.$route.fullPath"
                      :msg="item.title"
                      @bclick="clickTags(index)" 
                      @closeClick="closeTags(index)"
                    ></my-breadcrumb>
              </div>
              
              <el-main>
                <hr>
                <router-view></router-view>
              </el-main>
              <!--
              <el-footer>footer</el-footer>
              -->
            </el-container>
          </el-container>
      </transition>
      <!--不需要模板-->
      <transition v-else name="fade" mode="out-in">
        <div>
          <router-view></router-view>
        </div>
      </transition>

    </div>
</template>

<script>
import Sidebar from './components/Sidebar.vue'
import MyBreadcrumb from './components/MyBreadcrumb.vue'

export default{
  name: 'App',
  components: {
    Sidebar,
    MyBreadcrumb
  },
  data(){
    return{
      isCollapse:false,
      routes:[],
      tagsList:[],
      userName:'BlogAdmin'
    }
  },
  methods:{
    handleOpen(){
      //console.log('key' + key, 'keyPath' + keyPath)
    },
    handleClose(){
      //console.log('Close')
    },
    handleMenuSelect(index){
      // 在这里可以使用组件内部的数据或方法
      //console.log("当前选中的菜单项索引是：" + index);

      
      //页面跳转
      if(index !== '-')
      {
        //console.log('router',this.$router.getRoutes())
        //router.getRoutes()
        this.$router.push(index);
        //this.$router.replace(index);
      }
      
    },
    // 设置标签
    setTags(route) {
      if (!route.meta.NoTabPage && route.meta.title) {

        const isExist = this.tagsList.some(item => {
            return item.path === route.fullPath;
        })
        
        !isExist && this.tagsList.push({
            title: route.meta.title,
            path: route.fullPath,
            isEnable:true
          // name: route.matched[1].components.default.name
        })
      }
    },
    /**
     * 关闭单个标签
     */
    closeTags(index){
      const delItem = this.tagsList.splice(index, 1)[0];
      const item = this.tagsList[index] ? this.tagsList[index] : this.tagsList[index - 1];
      if (item) {
          this.tagsList[index] ? this.tagsList[index].isEnable=true : this.tagsList[index - 1].isEnable=true;
          delItem.path === this.$route.fullPath && this.$router.push(item.path);
          //this.$store.commit("saveTagsData", JSON.stringify(this.tagsList));
      } else {
          this.$router.push('/');
      }
    },
    /**
     * 选择标签
     */
    clickTags(index){
      const item = this.tagsList[index] ? this.tagsList[index] : this.tagsList[index - 1];
      if (item) {
          this.tagsList[index] ? this.tagsList[index].isEnable=true : this.tagsList[index - 1].isEnable=true;
          this.$router.push(item.path);
          //this.$store.commit("saveTagsData", JSON.stringify(this.tagsList));
      } else {
          this.$router.push('/');
      }
    },
    collapse(){
      this.userName = this.userName==='BlogAdmin' ? 'BA':'BlogAdmin';
      this.isCollapse = !this.isCollapse;
    }
  },
  mounted() {
            console.log('route....',this.$router.getRoutes())
            var NavigationBar = JSON.parse(window.localStorage.router ? window.localStorage.router : null);
            // var NavigationBar = global.antRouter;

            if (this.routes.length <= 0 && NavigationBar && NavigationBar.length >= 0) {
                this.routes = NavigationBar;
            }
            console.log('menu.....',this.routes)
            // 折叠菜单栏
  },
  updated(){

    //用户信息
    //var user = JSON.parse(window.localStorage.user ? window.localStorage.user : null);

    var NavigationBar = JSON.parse(window.localStorage.router ? window.localStorage.router : null);
    // var NavigationBar = global.antRouter;

    if (NavigationBar && NavigationBar.length >= 0) {
      if (this.routes.length <= 0 || (JSON.stringify(this.routes) != JSON.stringify((NavigationBar)))) {
        this.routes = NavigationBar;
      }
    }

  },
  watch: {
    // 对router进行监听，每当访问router时，对tags的进行修改
    $route: async function(newValue, from) {
        
        //if (global.IS_IDS4) {
        //    await this.refreshUserInfo();
        //}

        this.setTags(newValue);

        const tags = this.$refs.tag
        this.$nextTick(() => {
            if (tags) {
                for (const tag of tags) {
                    if (tag.to.path === this.$route.path) {
                        //this.$refs.scrollPane.moveToTarget(tag, tags)
                        // when query is different then update
                        // if (tag.to.fullPath !== this.$route.fullPath) {
                        //     this.$store.dispatch('tagsView/updateVisitedView', this.$route)
                        // }
                        break
                    }
                }
            }
        })

    },
    
  },
  created() {
      // 第一次进入页面时，修改tag的值
      this.setTags(this.$route);

      console.log('$route',this.$route)
      console.log('tagsList',this.tagsList)

      //读取折叠状态
      if(window.localStorage.collapse == 'true'){
          //this.collapsed = false;
          //this.collapse();
      }else{
          //this.collapsed = true;
          //this.collapse();
      }
  },
}
</script>

<style>
html,body,#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  /*color: #2c3e50;*/
  /*margin-top: 60px;*/
  height: 100%;
  margin: 0;
  padding: 0;
}


.el-container{
  /*background-color: #2c3e50;
  color: white;
  */
  height: 100%;

}
.el-header{
  background-color : #2c3e50;
  height: 20px;
  
}

.el-main{
  padding: 0 !important;
}

.el-footer{
  background-color:#42b983;
}


.el-menu-vertical-demo{
  width: 100%;
  /*height:calc(100% - 60px);*/
  min-height: 100%;
  background-color: #2c3e50 !important;/* 使用 !important 使得优先级最大 */
  color: white;
}

.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  min-height: 100%;
  background-color: #2c3e50;
}


.el-header .tools {
    padding: 0px 23px;
    width: 14px;
    height: 60px;
    line-height: 60px;
    cursor: pointer;
    float:left;
    color: white;
}

.tools.collapsed i {
     -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
    -webkit-transition: -webkit-transform .2s ease;
    transition: -webkit-transform .2s ease;
    transition: transform .2s ease;
    transition: transform .2s ease,-webkit-transform .2s ease;
}

.tags-view-item {
        display: inline-block;
        position: relative;
        cursor: pointer;
        height: 26px;
        line-height: 26px;
        border: 1px solid #d8dce5;
        color: #495060;
        background: #fff;
        padding: 0 8px;
        font-size: 12px;
        margin-left: 5px;
        margin-top: 4px;
    }

.tags-view-item:first-of-type {
        margin-left: 15px;
    }

.tags-view-item:last-of-type {
        margin-right: 15px;
    }


.tags-view-item.active::before {
        content: "";
        background: #2d8cf0;
        display: inline-block;
        width: 10px;
        height: 10px;
        border-radius: 50%;
        position: relative;
        margin-right: 2px;
    }
.tags-view-item .el-icon-close {
        width: 16px;
        height: 16px;
        vertical-align: 2px;
        border-radius: 50%;
        text-align: center;
        transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
        transform-origin: 100% 50%;
    }

.tags-view-item .el-icon-close:before {
        transform: scale(0.6);
        display: inline-block;
        vertical-align: -3px;
    }

.tags-view-item .el-icon-close:hover {
        background-color: #ef2b74;
        color: #fff;
    }
</style>
